<!--
  - Copyright (c) 2016-present. 山野羡民（1032694760@qq.com）
  -
  - The software is licensed under the Mulan PSL v2.
  - You can use this software according to the terms and conditions of the Mulan PSL v2.
  - You may obtain a copy of Mulan PSL v2 at:
  -     http://license.coscl.org.cn/MulanPSL2
  - THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR
  - IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
  - PURPOSE.
  - See the Mulan PSL v2 for more details.
  -->
<!-- 这个页面源自 Erupt 框架：https://www.erupt.xyz/demo/error/500.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>Error</title>
    <style>
        body, html {
            margin: 0 auto;
            padding: 0;
            font-weight: 800;
            background: url(./error-bg.svg)
        }

        body {
            font-family: cursive;
        }

        svg {
            display: block;
            font: 10.5em 'Monoton';
            width: 100%;
            height: 300px;
            margin: 0 auto;
        }

        .content {
            text-align: center;
            margin-bottom: 36px;
        }

        h1 {
            text-align: center;
            font: 2em 'Roboto', sans-serif;
            font-weight: 900;
            color: #2f8f7f;
            opacity: .6;
        }

        a {
            display: inline-block;
            text-transform: uppercase;
            font: 1em 'Roboto';
            font-weight: 300;
            border: 1px solid #2f8f7f;
            border-radius: 4px;
            color: #2f8f7f;
            margin-top: 6%;
            padding: 8px 50px;
            text-decoration: none;
            opacity: .6;
        }

        .text {
            fill: none;
            stroke: white;
            stroke-dasharray: 8%, 29%;
            stroke-width: 5px;
            stroke-dashoffset: 1%;
            animation: stroke-offset 5.5s infinite linear;
        }

        .text:nth-child(1) {
            stroke: #1c234d;
            animation-delay: -1s;
        }

        .text:nth-child(2) {
            stroke: #315b2c;
            animation-delay: -2s;
        }

        .text:nth-child(3) {
            stroke: #2f8f7f;
            animation-delay: -3s;
        }

        .text:nth-child(4) {
            stroke: #2f8f7f;
            animation-delay: -4s;
        }

        .text:nth-child(5) {
            stroke: #da2717;
            animation-delay: -5s;
        }

        @keyframes stroke-offset {
            100% {
                stroke-dashoffset: -35%;
            }
        }
    </style>
</head>
<body>
<svg viewBox="0 0 960 300">
    <symbol id="s-text">
        <text id="s-text-status" text-anchor="middle" x="50%" y="80%">ERROR</text>
    </symbol>
    <g class="g-ants">
        <use class="text" href="#s-text"></use>
        <use class="text" href="#s-text"></use>
        <use class="text" href="#s-text"></use>
        <use class="text" href="#s-text"></use>
        <use class="text" href="#s-text"></use>
    </g>
</svg>
<div class="content">
    <h1 id="error-message">不好意思，出错啦！</h1>
</div>
<script>
    // 获取当前页面的 URL
    const url = new URL(window.location.href);
    // 创建 URLSearchParams 对象
    const params = new URLSearchParams(url.search);
    // 获取查询参数 status 的值
    const status = params.get('status');
    // 根据 status 值设置不同的错误信息
    const sTextStatusElement = document.getElementById('s-text-status');
    sTextStatusElement.textContent = status;
    const errorMessageElement = document.getElementById('error-message');
    if (status === '401') {
        errorMessageElement.textContent = '授权过期，请重新登录。';
    } else if (status === '403') {
        errorMessageElement.textContent = '抱歉，无权访问该页面！';
    } else if (status === '404') {
        errorMessageElement.textContent = '抱歉，页面未找到！';
    } else {
        errorMessageElement.textContent = '抱歉，访问出错！';
    }
</script>
</body>
</html>